<template>
    <view>
        <!-- <back></back> -->
        <view class="top">
            <view :style="'height:' + top + 'px'"></view>
            <view class="u-flex u-row-between">
                <view class="u-flex top_add" @click="addShow = true">
                    <view class="top_add_text">哈尔滨市</view>
                    <image src="@/static/wImg/san.png" class="top_san"></image>
                </view>
                <view class="u-flex top_sea" @click="$func.jump('/wNew/pages/sieveStore')">
                    <image src="@/static/wImg/seach.png" class="top_sea_img"></image>
                    <input
                        type="text"
                        placeholder-style="color:#fff;"
                        placeholder="输入您想要的内容"
                    />
                </view>
            </view>
        </view>
        <view style="padding: 0 30rpx">
            <u-swiper :list="list" height="272" style="margin-top: -160rpx"></u-swiper>
            <view class="classify u-flex u-flex-wrap u-row-between">
                <view
                    class="u-flex-col u-col-center cla_item"
                    @click="$func.jump(item.path)"
                    v-for="item in classifyList"
                >
                    <image :src="item.img"></image>
                    {{ item.text }}
                </view>
            </view>
            <view class="burst u-flex u-col-top u-row-between">
                <view class="burst_left">
                    <view class="bur_top">
                        <image src="../../static/wImg/greenBg.png"></image>
                        <text class="bur_more"
                            >更多<u-icon
                                style="margin-left: 5rpx"
                                size="20"
                                name="arrow-right"
                                color="#999"
                            ></u-icon
                        ></text>
                    </view>
                    <view class="u-flex u-flex-wrap u-row-between" style="padding: 10rpx">
                        <view class="bur_item u-flex-col u-flex-center" v-for="item in 4">
                            <image src="../../static/logo.png" mode="aspectFill"></image>
                            <view class="bur_price">￥324.2</view>
                        </view>
                    </view>
                </view>
                <view style="width: 48%">
                    <view class="burst_left" style="width: 100%">
                        <view class="bur_top">
                            <image src="../../static/wImg/pinkBg.png"></image>
                            <text class="bur_more"
                                >更多<u-icon
                                    style="margin-left: 5rpx"
                                    size="20"
                                    name="arrow-right"
                                    color="#999"
                                ></u-icon
                            ></text>
                        </view>
                        <view class="u-flex u-flex-wrap u-row-between" style="padding: 10rpx">
                            <view class="bur_item" v-for="item in 2">
                                <image src="../../static/logo.png" mode="aspectFill"></image>
                            </view>
                        </view>
                    </view>
                    <view class="burst_left" style="width: 100%; margin-top: 20rpx">
                        <view class="bur_top">
                            <image src="../../static/wImg/orangeBg.png"></image>
                            <text class="bur_more"
                                >更多<u-icon
                                    style="margin-left: 5rpx"
                                    size="20"
                                    name="arrow-right"
                                    color="#999"
                                ></u-icon
                            ></text>
                        </view>
                        <view class="u-flex u-flex-wrap u-row-between" style="padding: 10rpx">
                            <view class="bur_item" v-for="item in 2">
                                <image src="../../static/logo.png" mode="aspectFill"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="tit u-flex u-row-between">
                <view
                    class="tit_item"
                    @click="titFn(index)"
                    :class="index == titIndex ? 'tit_css' : ''"
                    v-for="(item, index) in titList"
                >
                    <image src="../../static/wImg/greRight.png" v-if="index == titIndex"></image>
                    <image src="../../static/wImg/blaRight.png" v-else></image>
                    <text>{{ item }}</text>
                    <image src="../../static/wImg/greLft.png" v-if="index == titIndex"></image>
                    <image src="../../static/wImg/blaLeft.png" v-else></image>
                </view>
            </view>
            <mescroll-body
                :sticky="true"
                ref="mescrollRef"
                @init="mescrollInit"
                @down="downCallback"
                @up="upCallback"
            >
                <view class="">
                    <u-waterfall v-model="flowList" ref="uWaterfall">
                        <template v-slot:left="{ leftList }">
                            <view
                                class="demo-warter"
                                @click="$func.jump('/wNew/pages/detail?id=' + item.id)"
                                v-for="(item, index) in leftList"
                                :key="index"
                            >
                                <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
                                <u-lazy-load
                                    threshold="-450"
                                    border-radius="10"
                                    :image="item.image"
                                    :index="index"
                                ></u-lazy-load>
                                <view style="margin-top: 20rpx">
                                    <text class="mark" v-if="item.shop.isself == 1">平台</text>
                                    <text class="mark markOra" v-else>商家</text>
                                    <text class="mark markOra" v-if="item.platform_ms == 1"
                                        >秒杀</text
                                    >
                                    <text class="mark markOra" v-if="item.platform_hot == 1"
                                        >折扣</text
                                    >
                                    {{ item.title }}
                                </view>
                                <view class="demo-tag">
                                    <view class="demo-tag-text"> 放心购 </view>
                                    <view class="demo-tag-text demo-tag-text-grey"> 特产标签 </view>
                                </view>
                                <view class="demo-price">
                                    <text>￥</text>{{ item.price }}
                                    <text class="demo-price-grey">￥{{ item.hx_price }}</text>
                                </view>
                                <view
                                    class="demo-shop"
                                    @click.stop="$func.jump('/wNew/pages/store?id=' + item.shop_id)"
                                >
                                    <image src="../../static/wImg/home.png"></image>
                                    {{ item.shop.shopname }}
                                    <u-icon name="arrow-right" color="#999"></u-icon>
                                </view>
                            </view>
                        </template>
                        <template v-slot:right="{ rightList }">
                            <view
                                class="demo-warter"
                                @click="$func.jump('/wNew/pages/detail?id=' + item.id)"
                                v-for="(item, index) in rightList"
                                :key="index"
                            >
                                <u-lazy-load
                                    threshold="-450"
                                    border-radius="10"
                                    :image="item.image"
                                    :index="index"
                                ></u-lazy-load>
                                <view style="margin-top: 20rpx">
                                    <text class="mark" v-if="item.shop.isself == 1">平台</text>
                                    <text class="mark markOra" v-else>商家</text>
                                    <text class="mark markOra" v-if="item.platform_ms == 1"
                                        >秒杀</text
                                    >
                                    <text class="mark markOra" v-if="item.platform_hot == 1"
                                        >折扣</text
                                    >
                                    {{ item.title }}
                                </view>
                                <view class="demo-tag">
                                    <view class="demo-tag-text"> 放心购 </view>
                                    <view class="demo-tag-text demo-tag-text-grey"> 特产标签 </view>
                                </view>
                                <view class="demo-price">
                                    <text>￥</text>{{ item.price }}
                                    <text class="demo-price-grey">￥{{ item.hx_price }}</text>
                                </view>
                                <view
                                    class="demo-shop"
                                    @click.stop="$func.jump('/wNew/pages/store?id=' + item.shop_id)"
                                >
                                    <image src="../../static/wImg/home.png"></image>
                                    {{ item.shop.shopname }}
                                    <u-icon name="arrow-right" color="#999"></u-icon>
                                </view>
                            </view>
                        </template>
                    </u-waterfall>
                </view>
            </mescroll-body>
        </view>
        <u-picker v-model="addShow" mode="region"></u-picker>
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            top: 0,
            addShow: false,
            list: [],
            classifyList: [
                {
                    img: "../../static/wImg/classify1.png",
                    text: "零食便当",
                },
                {
                    img: "../../static/wImg/classify2.png",
                    text: "农家腊味",
                },
                {
                    img: "../../static/wImg/classify3.png",
                    text: "坛子酱菜",
                },
                {
                    img: "../../static/wImg/classify4.png",
                    text: "生鲜果蔬",
                },
                {
                    img: "../../static/wImg/classify5.png",
                    text: "杂粮干货",
                },
                {
                    img: "../../static/wImg/classify6.png",
                    text: "酒水茶叶",
                },
                {
                    img: "../../static/wImg/classify7.png",
                    text: "海鲜鱼货",
                },
                {
                    img: "../../static/wImg/classify8.png",
                    text: "全部分类",
                    path: "/wNew/pages/classify",
                },
            ],
            titList: ["平台优选", "地方商家"],
            titIndex: 0,
            flowList: [],
        };
    },
    onLoad() {
        let res = uni.getSystemInfoSync();
        if (res.safeAreaInsets.top == 0) {
            this.top = 20;
        } else {
            this.top = res.safeAreaInsets.top;
        }
        this.indexFn();
    },
    methods: {
        indexFn() {
            this.$u.post("/api/index/get_banner").then((res) => {
                if (res.code == 1) {
                    this.list = res.data;
                }
            });
        },
        titFn(index) {
            this.titIndex = index;
            this.mescroll.resetUpScroll();
        },
        upCallback(page) {
            this.mescroll.optDown.use = false;
            this.mescroll.optUp.textNoMore = "- 已经到底啦 -";
            this.$u
                .post("/api/index/likes", {
                    page: page.num,
                    limit: page.size,
                    type: this.titIndex + 1,
                    location_city: uni.getStorageSync("city"),
                })
                .then((res) => {
                    this.mescroll.endBySize(res.data.data.length, res.data.total);
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.top {
    padding: 0 30rpx 200rpx;
    background-color: #606dce;

    .top_add {
        .top_add_text {
            width: 120rpx;
            font-size: 28rpx;
            color: #fff;
            overflow: hidden; // 文字超长隐藏
            text-overflow: ellipsis; // 显示...
            white-space: nowrap; // 单行显示
        }

        .top_san {
            width: 22rpx;
            height: 10rpx;
            margin-left: 10rpx;
        }
    }

    .top_sea {
        flex: 1;
        z-index: 9999;
        margin-left: 40rpx;
        height: 60rpx;
        padding: 0 18rpx;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 10rpx 10rpx 10rpx 10rpx;

        .top_sea_img {
            width: 25.15rpx;
            height: 23.6rpx;
        }

        input {
            color: #fff;
            height: 20rpx;
            font-size: 24rpx;
            padding: 0 18rpx;
            margin-left: 18rpx;
            border-left: 1rpx solid #fff;
        }
    }
}

.classify {
    background: #fff;
    margin-top: 20rpx;
    padding: 30rpx 58rpx 6rpx;
    border-radius: 20rpx;

    .cla_item {
        font-size: 24rpx;
        color: #333;
        margin-right: 60rpx;
        margin-bottom: 24rpx;

        &:nth-child(4n) {
            margin-right: 0;
        }

        image {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 12rpx;
        }
    }
}

.burst {
    margin-top: 20rpx;

    .burst_left {
        width: 48%;
        background: #fff;
        border-radius: 20rpx;

        .bur_top {
            width: 100%;
            height: 48rpx;
            text-align: right;
            position: relative;

            image {
                width: 100%;
                height: 48rpx;
                position: absolute;
            }

            .bur_more {
                font-size: 20rpx;
                color: #999;
                padding-right: 10rpx;
            }
        }

        .bur_item {
            width: 148rpx;
            margin-bottom: 10rpx;

            image {
                width: 148rpx;
                height: 148rpx;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
            }

            .bur_price {
                font-size: 24rpx;
                color: #ff5125;
                margin-top: 10rpx;
            }
        }
    }
}

.tit {
    background: #fff;
    height: 76rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;
    margin-bottom: 10rpx;

    .tit_item {
        width: 50%;
        z-index: 999;
        display: flex;
        color: #666666;
        align-items: center;
        justify-content: center;

        &:first-child {
            border-right: 1rpx solid #dbdbdb;
        }

        text {
            font-size: 28rpx;
            font-weight: bold;
            letter-spacing: 8rpx;
            margin: 0 3rpx 0 7rpx;
        }

        image {
            width: 23rpx;
            height: 19rpx;
            margin-bottom: -6rpx;
        }
    }

    .tit_css {
        color: #606dce;
    }
}

.demo-warter {
    border-radius: 8px;
    margin: 5px;
    background-color: #ffffff;
    padding: 8px;
    position: relative;
}

.demo-image {
    width: 100%;
    border-radius: 4px;
}

.demo-title {
    // font-size: 30rpx;
    // margin-top: 5px;
    // color: $u-main-color;
}

.demo-tag {
    display: flex;
    margin-top: 5px;
}

.demo-tag-owner {
    background-color: $u-type-error;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 4rpx 14rpx;
    border-radius: 50rpx;
    font-size: 20rpx;
    line-height: 1;
}

.demo-tag-text {
    border: 1px solid #f43000;
    color: #f43000;
    margin-right: 8px;
    line-height: 1;
    padding: 8rpx 24rpx 8rpx 16rpx;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    font-size: 20rpx;
}

.demo-tag-text-grey {
    border: 1px solid #999;
    color: #999;
}

.mark {
    font-size: 20rpx;
    color: #fff;
    padding: 6rpx 10rpx;
    background: #606dce;
    border-radius: 4rpx;
    margin-right: 20rpx;
}
.markOra {
    background: #ef5205;
}
.demo-price {
    font-size: 30rpx;
    color: $u-type-error;
    margin-top: 5px;
    font-weight: bold;
    font-size: 32rpx;

    text {
        font-size: 20rpx;
    }

    .demo-price-grey {
        color: #d3d3d3;
        font-size: 20rpx;
        font-weight: 400;
        margin-left: 18rpx;
        text-decoration: line-through;
    }
}

.demo-shop {
    font-size: 22rpx;
    color: $u-tips-color;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    image {
        width: 20rpx;
        height: 20rpx;
        margin-right: 8rpx;
    }
}
</style>
